<template>
  <el-container class="setting_user-setting">
    <!-- <el-button class="fixedRight" type="primary" icon="el-icon-sort" @click="$showHide()" size="small" /> -->
    <el-main>
      <div class="card-list">
        <el-card shadow="never" class="selectCard searchColumn">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="用户姓名：">
                  <el-input v-model="params.name" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="登录账号：">
                  <el-input v-model="params.mobile" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话：">
                  <el-input v-model="params.tel" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="邮箱">
                  <el-input v-model="params.email" />
                </el-form-item>
              </el-col> -->
            </el-row>
            <SearchButton
              :default-params="params"
              @refreshParams="refreshParams"
              @getList="getList1"
            />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar
            :custom="{ icon: 'el-icon-s-operation' }"
            :refresh="{ query: getList1 }"
            print
          >
            <template v-slot:buttons>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-plus"
                @click="openDialog('')"
              >新增</el-button>
            </template>
            <!-- <template v-slot:tools>1</template> -->
          </vxe-toolbar>
          <vxe-table
            ref="xTable"
            border
            resizable
            highlight-hover-row
            :loading="loading"
            :auto-resize="true"
            :data="tableData"
            width
            max-height="500"
            :print-config="{}"
            header-align="center"
          >
            <!-- <vxe-table-column align="center" title="头像" min-width="100">
              <template slot-scope="scope">
                <img :src="scope.row.image" class="headerIcon" alt="">
              </template>
            </vxe-table-column> -->
            <vxe-table-column type="seq" width="50" title=" " align="center" />
            <vxe-table-column field="mobile" width="180" align="left" title="登录账号">
              <template slot-scope="scope">
                <div>(+86){{ scope.row.mobile }}</div>
              </template>
            </vxe-table-column>
            <vxe-table-column field="name" width="150" title="用户姓名" />
            <vxe-table-column field="mobile" width="150" title="联系电话" />
            <vxe-table-column field="roleName" min-width="200" title="所属角色" />
            <vxe-table-column field="demoUser" width="80" align="center" title="演示账号">
              <template slot-scope="scope">
                <div v-if="scope.row.demoUser">是</div><div v-else>否</div>
              </template>
            </vxe-table-column>
            <vxe-table-column title="状态" width="80" align="center" slots="default">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.publishStatus"
                  :inactive-value="0"
                  :active-value="1"
                  active-text
                  inactive-text
                  @change="changeState(scope)"
                />
              </template>
            </vxe-table-column>
            <vxe-table-column title="在职" width="80" align="center" slots="default">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.job"
                  :disabled="scope.row.job === 1 ? false : true"
                  :inactive-value="0"
                  :active-value="1"
                  active-text
                  inactive-text
                  @change="changeJobState(scope)"
                />
              </template>
            </vxe-table-column>
            <vxe-table-column title="操作" fixed="right" align="center" width="140" slots="default">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, true)"
                >查看</el-button>
                <el-button
                  v-if="scope.row.publishStatus != 1"
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, false)"
                >编辑</el-button>
                <el-button
                  v-if="scope.row.publishStatus != 1"
                  type="text"
                  size="mini"
                  @click="delUser(scope.row.id)"
                >删除</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="resetPwd(scope.row.id)"
                >重置密码</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="relevanceRole(scope.row.id)"
                >配置角色</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
            @page-change="getList()"
          />
        </el-card>
      </div>
    </el-main>
    <user-edit ref="userEdit" :parent-id="selectId" @refresh="getList()" />
    <el-dialog
      v-if="roleDialog"
      title="配置角色"
      :close-on-click-modal="false"
      :visible.sync="roleDialog"
    >
      <vxe-table
        ref="role"
        border
        resizable
        highlight-hover-row
        :data="roleList"
        height="350"
        :auto-resize="true"
      >
        <vxe-table-column type="checkbox" width="50" />
        <vxe-table-column field="name" width="180" title="角色名称" />
        <vxe-table-column field="remark" min-width="120" title="角色描述" />
      </vxe-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialog = false">取 消</el-button>
        <el-button type="primary" @click="setRole">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import userEdit from './components/userEdit'
import {
  getPageList,
  updateState,
  updateJobState,
  delUser,
  resetPwd,
  modifyByUserId,
  getRolesByUserId
} from '@/api/user'
import { getRoleList } from '@/api/role'
export default {
  components: {
    SearchButton,
    userEdit
  },
  data() {
    return {
      roleDialog: false,
      disabledEdit: false,
      roleList: [],
      title: '蜂网电子商务',
      params: {
        name: ''
      },
      tableData: [
        {
          name: '111',
          id: 1
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      selectId: '',
      loading: false,
      nowUserId: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    relevanceRole(id) {
      this.nowUserId = id
      this.roleDialog = true
      this.getRoleInfo()
    },
    getRoles() {
      getRolesByUserId(this.nowUserId).then((response) => {
        response.forEach((item, index) => {
          this.roleList.forEach((it, idx) => {
            if (item === it.id) {
              this.$refs.role.setCheckboxRow(this.roleList[idx], true)
            }
          })
        })
      })
    },
    getRoleInfo() {
      getRoleList().then((response) => {
        this.roleList = response
        this.getRoles()
      })
    },
    setRole() {
      const arr = this.$refs.role.getCheckboxRecords().map((item) => item.id)
      if (arr.length !== 0) {
        modifyByUserId({
          userId: this.nowUserId,
          roleIds: arr
        }).then((response) => {
          this.$message.success('关联成功')
          this.roleDialog = false
        })
      } else {
        this.$message.error('请选择角色')
      }
    },
    resetPwd(id) {
      this.$confirm('此操作将重置该账号密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          resetPwd({
            id: id
          }).then((response) => {
            this.$message.success('重置密码为123456')
            this.getList()
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    openDialog(id, bool) {
      this.disabledEdit = bool
      this.selectId = id
      setTimeout(() => {
        this.$refs.userEdit.init(bool)
      })
    },
    refreshParams() {
      this.params = {}
    },
    getList1() {
      this.tableCurrentPage = 1
      this.getList()
    },
    getList() {
      getPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ...this.params
      }).then((response) => {
        this.tableData = response.records
        this.total = response.total
      })
    },
    changeState(scope) {
      this.tableData[scope.seq - 1].publishStatus =
        scope.row.publishStatus === 1 ? 0 : 1
      updateState({
        id: scope.row.id,
        status: scope.row.publishStatus === 1 ? 0 : 1
      }).then((response) => {
        this.tableData[scope.seq - 1].publishStatus =
          scope.row.publishStatus === 1 ? 0 : 1
        this.$message.success(
          scope.row.publishStatus === 0 ? '禁用成功' : '启用成功'
        )
      })
    },
    changeJobState(scope) {
      this.tableData[scope.seq - 1].job = 0
      updateJobState({
        id: scope.row.id
      }).then((response) => {
        this.tableData[scope.seq - 1].job = 0
        this.$message.success(scope.row.job === 0 ? '离职成功' : '在职')
      })
    },
    delUser(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delUser({
            id: id
          }).then((response) => {
            this.$message.success('删除成功')
            this.getList()
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss">
.setting_user-setting {
  .card-list {
    width: 100%;
  }
  .headerIcon {
    width: 40px;
    height: 40px;
  }
}
</style>
